<template>
	<view :data-theme="theme()" :class="theme() || ''" v-if="!loading">
		<view class="coupon_bg"></view>
		<view class="coupon-detail-top">
			<view class="top_box">
				<view>
					<text class="icon iconfont icon-stores" style="color: #fff;font-size: 32rpx;"></text>
					<text class="white fb f32 ml10">{{detail.supplier?detail.supplier.name:'平台通用'}}</text>
				</view>
				<view class="item-wrap">
					<view :class="'coupon-item coupon-item-' + detail.color.text">
						<view class="operation d-b-c w-b">
							<view class="flex-1 coupon-content">
								<view class="mb20 text-ellipsis">
									<text class="f40 fb">{{ detail.name }}</text>
								</view>
								<view class="f22 gray9 mb20">
									<template v-if="detail.expire_type == 10">
										有效期：领取{{ detail.expire_day }}天内有效
									</template>
									<template v-if="detail.expire_type == 20">
										有效期：{{ detail.start_time.text }} 至 {{ detail.end_time.text }}
									</template>
								</view>
							</view>
							<view class="right-box d-c-c d-c">
								<view class="theme-price mb10" v-if="detail.coupon_type.value == 10">
									<text class="f24">￥</text>
									<text class="f52 fb">{{ detail.reduce_price * 1 }}</text>
								</view>
								<view class="mb10 theme-price" v-if="detail.coupon_type.value == 20">
									<text class="f52 fb">{{ detail.discount }}</text>
									<text class="f24">折</text>
								</view>
								<view class="f24 mb10">
									{{ detail.min_price > 0 ? '满' + detail.min_price * 1 + '元可用' : '无门槛' }}
								</view>
								<view v-if="detail.is_get == 0" class="f26 coupon-btn theme-btn"
									@click="receiveCoupon()">领取</view>
								<button v-else type="default" class="f26 coupon-btn btn-gray"
									@click="receiveCoupon()">已领取</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<template v-if="apply_range!=10">
				<view class="white f30 fb d-c-c">
					<text class="ml10 mr10 title-text">指定以下商品使用</text>
				</view>
				<!-- 商品列表 -->
				<view class="o-h pro_list d-b-c f-w">
					<view class="pro_item" v-for="(item,index) in listData" :key='index'
						@click="gotoPage('/pages/product/detail/detail?product_id='+item.product_id)">
						<image class="pro_item_image" :src="item.product_image || '/static/default.png'"
							mode="aspectFill"></image>
						<view class="product-info">
							<view class="f28 gray3 text-ellipsis">{{item.product_name}}</view>
							<view class="f22 gray9 mt10 mb10">累计成交：{{item.product_sales}}笔</view>
							<view class="f24">
								<text class="f24 theme-price">￥</text><text
									class="f32 fb theme-price">{{item.product_price}}</text>
								<text class="gray9 text-d-line">￥{{item.line_price}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30 ww100" v-if="listData.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</template>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				opacity: 0,
				coupon_id: 0,
				listData: [],
				detail: {
					state: {
						value: 0,
						text: ''
					}
				}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop < 100) {
				this.opacity = e.scrollTop / 100
			} else {
				this.opacity = 1
			}

		},
		onLoad(e) {
			this.coupon_id = e.coupon_id;
			this.apply_range = e.apply_range;
		},
		onShow() {
			this.page = 1;
			this.listData = [];
			/*获取数据*/
			this.getData();
		},
		methods: {
			getData() {
				let self = this;
				self.loading = true;
				uni.showLoading({
					title: '加载中'
				});
				let data_type = self.data_type;
				self._get('coupon.coupon/detail', {
					coupon_id: self.coupon_id,
				}, function(res) {
					uni.hideLoading();
					self.loading = false;
					self.detail = res.data.model;
					if (self.apply_range == 20) {
						self.listData = res.data.model.product;
					} else if (self.apply_range == 30) {
						self.listData = self.listData.concat(res.data.product_list.data);
						self.last_page = res.data.product_list.last_page;
						if (res.data.product_list.last_page <= 1) {
							self.no_more = true;
						}
					}
				});
			},
			receiveCoupon() {
				let self = this;
				if (self.detail.is_get == 1) {
					return false;
				}
				self._post(
					'user.coupon/receive', {
						coupon_id: self.detail.coupon_id
					},
					function(result) {
						uni.showToast({
							title: '领取成功',
							icon: 'success',
							mask: true,
							duration: 2000
						});
						self.detail.is_get = 1;
						self.detail.state.text = '已领取';
					}
				);
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {}

	.coupon_bg {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 0;
		width: 750rpx;
		height: 1134rpx;
		background: linear-gradient(-180deg, #394263 0%, rgba(255, 255, 255, 0) 100%);
	}

	.top_box {
		padding: 32rpx 20rpx 30rpx 20rpx;
	}

	.coupon-wrap {
		padding: 30rpx;
	}

	.coupon-detail-top {
		position: relative;
		z-index: 1;
	}

	.item-wrap {
		margin: 0;
		margin-top: 30rpx;
	}

	.coupon-item .btns button {
		border: none;
	}

	.coupon-item .circles text {
		display: block;
		width: 10rpx;
		height: 20rpx;
		background: linear-gradient(0deg, #fffdd7 0%, #fee6df 100%);
		border-radius: 0 10rpx 10rpx 0;
	}

	.coupon-item .info::before,
	.coupon-item .info::after {
		background: linear-gradient(0deg, #fffdd7 0%, #fee6df 100%);
	}

	.decorate {
		width: 16rpx;
		height: 16rpx;
	}

	.pro_list {
		padding: 0 20rpx;
		padding-bottom: 80rpx;
		padding-top: 40rpx;
	}

	.pro_item {
		width: 342rpx;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #ffffff;
		margin-bottom: 12rpx;
	}

	.pro_item_image {
		width: 304rpx;
		height: 304rpx;
		display: block;
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 12rpx;
		border-radius: 15rpx;
	}

	.head_top {
		position: relative;
		line-height: 30px;
		color: #ffffff;
		font-size: 32rpx;
	}

	.reg180 {
		padding-right: 20rpx;
		text-align: right;
		transform: rotateY(180deg);
		position: absolute;
		bottom: 0;
		height: 100%;
		display: flex;
		align-items: center;
		left: 0;
	}

	.icon-jiantou {
		color: #333333;
		font-size: 32rpx;
	}

	.product-info {
		padding: 0 20rpx 30rpx 20rpx;
	}

	.title-text {
		position: relative;
	}

	.title-text::after,
	.title-text::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 40rpx;
		height: 2rpx;
		background: #FFFFFF;
		z-index: 1;
	}

	.title-text::after {
		left: -60rpx;
	}

	.title-text::before {
		right: -60rpx;
	}
</style>